互動式網頁體驗的基礎在於將靜態的 DOM 元素 轉化為動態且可回應的節點。此過程包括擷取原始內容、清除現有狀態，並使用正規表示式將邏輯重新注入文件結構中。
1. DOM 節點操作
為了讓元素準備好進行互動，會使用 textContent 屬性來提取節點內的所有文字。透過將其設為空字串（node.textContent = ""），我們有效地清空了該節點，為動態內容的重建創造了一個空白畫布。
2. 使用正規表示式進行模式匹配
開發者會使用帶有 'global' 選項的正規表示式，以高效地掃描文字中的特定關鍵字或觸發條件。這對於 highlightCode 函數識別單一字串中多個語法關鍵字出現的情況至關重要。
3. 自動化模式部署
擴展互動時，會對特定標籤進行迴圈處理——常見的是 <pre> 元素搭配 data-language 屬性，並呼叫轉換函數以全域套用樣式或行為。這能將靜態的程式碼片段轉換為易讀且專業的互動環境。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
Register a key event handler that logs the key codes it gets and press the key you are interested in.
window.addEventListener('keydown', e => console.log(e.keyCode));
document.onKeyPress = function(e) { return e.code; };
node.textContent = event.keyCode;
window.log(e.keyCode);
✅ Correct!
Correct. Registering a 'keydown' listener on the window or document allows you to capture and log the keyCode or key property of every physical press.❌ Incorrect
You must use an event listener and log the event property (like keyCode or key) to the console.QUESTION 2
Why is the 'global' (/g) option required for the keywords regular expression in syntax highlighting?
To ensure it works in all browsers.
To allow the exec() method to find all matches in the text, not just the first one.
To make the regex case-insensitive.
To automatically clear the node's textContent.
✅ Correct!
Correct. The 'global' flag allows the regex object to track its state (lastIndex), enabling a loop to find every occurrence of a keyword.❌ Incorrect
Without the global flag, regex methods will return only the first match or fail to update the search position for the next iteration.QUESTION 3
Which property is used to effectively 'empty' a node before rebuilding its interactive content?
node.innerHTML = null;
node.textContent = '';
node.removeChildren();
node.value = '';
✅ Correct!
Correct. Setting textContent to an empty string removes all children and text content from the node.❌ Incorrect
textContent is the standard, high-performance way to clear a node's existing text state.QUESTION 4
What is the primary purpose of the 'Reset Phase' in the transformation pipeline?
To delete the element from the DOM.
To clear the existing static state so dynamic, styled spans can be injected.
To reset the browser's scroll position.
To clear the regex's lastIndex property.
✅ Correct!
Correct. We clear the raw text to make room for a new tree of text nodes and styled spans.❌ Incorrect
Resetting the content is necessary because we cannot easily style sub-parts of a raw text node without wrapping them in elements.QUESTION 5
How does automated pattern deployment typically identify blocks that need processing?
By checking every single tag in the body.
By looping over elements with specific metadata, such as a data-language attribute.
By waiting for a user to click on the text.
By using the window.onload event to clear the whole page.
✅ Correct!
Correct. Using data-attributes like 'data-language' allows scripts to selectively target specific nodes for transformation.❌ Incorrect
Looping over specific attributes is much more efficient than scanning every node in the document.Case Study: Advanced Interaction Patterns
Implementing Visual Feedback and Input Tracking
You are tasked with creating a highly interactive developer playground. You need to implement a mechanism to track mouse movement for visual flair and a key-logging tool for debugging input event handlers.
Q
1. Implement a mouse trail—a series of images that follow the mouse pointer. Explain the strategy using absolutely positioned div elements.
Solution:
Strategy: 1. Create a fixed number of
Strategy: 1. Create a fixed number of
elements (e.g., 10) with 'position: absolute'. 2. Maintain an index to track the 'current' dot. 3. Add a 'mousemove' listener to the window. 4. On each event, move the current dot to event.pageX/pageY, then increment the index (using modulo to cycle). This reuses elements for efficiency.
Q
2. Provide a code snippet for a mouse trail implementation using 20px blue squares. (Answer must be roughly 32 words).
Solution:
Create 10 divs:
Create 10 divs:
dots.push(document.body.appendChild(document.createElement('div'))). In mousemove: let dot = dots[index]; dot.style.left = event.pageX + 'px'; dot.style.top = event.pageY + 'px'; index = (index + 1) % 10;.